<template>
  <div class="out-system">
    <div class="relation-data-title">
      <div>{{ data.subject }}</div>
    </div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <div class="show-image" @click="openOutSystem(item)">
          <img
            v-if="item.imgSrc"
            class="image-setting"
            :src="imgUrl(item)"
            @click="openOutSystem(item)" />
          <a class="text-setting">{{ item.subject || item.url }}</a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  /*global openCtpWindow _ctxPath*/
  import mixins from '../mixins';
  export default {
    name: 'OutSystem',
    mixins: [mixins],
    methods: {
      openOutSystem(item) {
        openCtpWindow({ url: item.url, id: this.data.id });
      },

      imgUrl(item) {
        return `${_ctxPath}/fileUpload.do?method=showRTE&type=image&fileId=${item.imgSrc}&createDate=${item.imgDate}`;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .out-system {
    ul > li {
      padding: 5px;
      text-align: center;
    }
    .show-image {
      display: flex;
      align-items: center;
      .image-setting {
        width: 60px;
        height: 60px;
      }
      .text-setting {
        line-height: 30px;
        flex: 1;
      }
    }
  }
</style>
